<template>
  <div class="about">
    <!-- 插值语法 -->
    <h1>父组件</h1>
    <input v-model="info">
    <h4>收到子组件1传递数据为: {{sonMsg}}</h4>
    <input v-model= 'value'>
    <br>
    <h4>收到子组件2修改的数据为: {{value}}</h4>
    <el-row>
      <el-col :span="12">
        <hello-son :msg='info' @out="receiveMsgFromSon"></hello-son>
      </el-col>
      <el-col :span="12">
        <hello-child v-model='value'></hello-child>
      </el-col>
    </el-row>
    
  </div>
</template>
<script>
import HelloSon from '@/components/HelloSon.vue'
import HelloChild from '@/components/HelloChild.vue'
export default {
  name: 'AboutView',
  components: { 
    HelloSon,
    HelloChild,
  },
  data() {
    return {
      info: "Hello, my son!",
      sonMsg: '',
      value: '',
     
    };
  },
  methods: {
    receiveMsgFromSon(value) {
      this.sonMsg = value;
    }
  },
}
</script>
<style scoped>
  .about {
    background-color:antiquewhite;
  }
</style>